<template>
    <div>
        <ul class="menu_top_list ">
            <li @click="add()">
                <span class="iconfont icon-fanhui"></span>
            </li>
            <li>全部分类</li>
            <router-link tag="li" to="/home" class="index-btn"></router-link>

        </ul>
        <div class="ikun20">
            <div class="sort-item" v-for=" (k, index) in  this.con " :key="index">
                <div class="shd">
                    <router-link :to="'./gameCont?id=' + k.id" class="title">
                        <img :src="k.img">
                        <span>{{ k.name }}</span>
                    </router-link>
                    <router-link :to="'./gameCont?id=' + k.id" class="more"></router-link>


                </div>
                <div class="sbd">
                    <ul>
                        <li>
                            <router-link :to="'./gameCont?id=' + k.id">大炮</router-link>
                        </li>
                        <li>
                            <router-link :to="'./gameCont?id=' + k.id">坦克</router-link>
                        </li>
                        <li>
                            <router-link :to="'./gameCont?id=' + k.id">战斗机</router-link>
                        </li>
                        <li>
                            <router-link :to="'./gameCont?id=' + k.id">射箭</router-link>
                        </li>
                        <li>
                            <router-link :to="'./gameCont?id=' + k.id">塔防</router-link>
                        </li>
                        <li>
                            <router-link :to="'./gameCont?id=' + k.id">战争</router-link>
                        </li>
                        <li>
                            <router-link :to="'./gameCont?id=' + k.id">直升机</router-link>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { gameCont, getHomepage } from '@/api/home';
// import { Sticky } from 'vant';
export default {
    data() {
        return {
            phone: '',
            password: '',
            code: '',
            indexSwiper: 0,
            container: null,
            con: null,
            coco: null,
            bad: null,
            list: [],
            loading: false,
            finished: false,

            count: 1,
            scrollTop: "",//距离顶部的距离
            scrollHeight: "",//总共的高
            offsetHeight: "",//当前页面的高

        };
    },
    methods: {


        // 返回go(-1)
        add() {
            this.$router.go(-1)
        },
    },
    mounted() {
        gameCont().then(data => {

            this.list = data






        });

        getHomepage().then(data => {

            this.con = data.img







        });

    }

}

</script>
<style lang="scss" scoped>
.sort-item .sbd li:nth-child(4n) {
    margin-right: 0;
}

.sort-item .sbd li {
    width: 78px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #f5f5f5;
    color: #333333;
    font-size: 13px;
    border-radius: 5px;
    margin-top: 15px;
    overflow: hidden;
    float: left;
    margin-right: 14px;
    user-select: none;
    -webkit-user-select: none;
}

.sort-item .sbd li a {
    display: block;
}

.sort-item .sbd ul {
    overflow: hidden;
}

.sort-item {
    margin-bottom: 25px;
}

.sort-item .shd .title img {
    width: 24px;
    height: 24px;
    float: left;
    margin-right: 7px;
}

.ikun20 {
    margin: 48px 10px;
}

.sort-item .shd {
    height: 24px;
    line-height: 25px;
    overflow: hidden;
}

.sort-item .shd .title {
    float: left;
    color: #333;
    font-weight: bold;
    font-size: 16px;
}

.sort-item .shd .more {
    float: right;
    color: #b4b3b3;
    background: url("https://h.4399.com/images/2022/arrow.png") center right no-repeat;
    background-size: 9px 14px;
    width: 20px;
    height: 24px;
    text-indent: -9999px;
}

.sort-item .shd .title span {
    float: left;
}

@media screen and (min-width: 768px) {
    .sort-item .sbd li {
        width: 23%;
        margin: 15px 1% 0;
    }

}

em,
i {
    font-style: normal;
    vertical-align: top;
}

.index-btn {
    background: url("https://h.4399.com/images/2022/backindex_icon.png") no-repeat -9px 0;
    background-size: 28px;
    width: 40px;
    height: 38px;
    right: 0;
    background-position: 5px 14px;
    cursor: pointer;
}

.menu_top_list {
    max-width: 500px;
    margin: 0 auto;
    position: fixed;
    height: 48px;
    width: 100%;
    background-color: white;
    color: #333;
    font-size: 16px;
    font-weight: bold;

    z-index: 90;
    top: 0;
}

.menu_top_list li+li {
    width: 64%;
    -webkit-box-pack: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.menu_top_list li {
    float: left;
    display: -webkit-box;
    -webkit-box-align: center;
    height: 48px;
}

.menu_top_list li:first-child {
    cursor: pointer;
    width: 18%;
    color: #BFBFBF;
    font-size: 20px
}

.menu_top_list li:last-child {
    width: 18%;
}

.menu_top_list li:first-child::before {
    background: url("https://rs.sfacg.com/web/m/images/menu_top_icon.png") no-repeat -49.216px 9.96px;
    background-size: 105.462px;
    content: "";
    height: 46.8px;
    width: 24.608px;
    display: block;
}
</style>